<template>
<div style="margin:20px">
  <div id="d1">
    <span>姓名：{{form.name}}</span>
    <span>手机号：{{form.phone}}</span>
    <span>微信名称：{{form.wxName}}</span>
    <el-divider></el-divider>
    <span>电子邮箱：{{form.email}}</span>
    <span>投资金额：{{form.investmentamount}}</span>
    <span>收益分成：{{form.share}}</span>
    <el-divider></el-divider>
    <span>银行卡号：{{form.cardnumber}}</span>
    <span>入伙时间：{{form.entrytime}}</span>
    <span>创建时间：{{form.createtime}}</span>
    <el-divider></el-divider>
  </div>
    <el-row>
    <router-link to="/user/shareholder">
    <el-button size="medium" style="margin-left:750px">返回</el-button>
    </router-link>
    <el-button type="primary" size="medium" style="margin-left:50px" @click="update">编辑</el-button>
    </el-row>
    <el-dialog title="修改股东信息" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        ref="form"
        style="width: 60%"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="电话"
          :label-width="formLabelWidth"
          prop="phone"
          :error="errorMsg"
        >
          <el-input
            v-model="form.phone"
            autocomplete="off"
            @blur="checkPhone"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="微信名称"
          :label-width="formLabelWidth"
          prop="wxName"
        >
          <el-input v-model="form.wxName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="电子邮箱"
          :label-width="formLabelWidth"
          prop="email"
        >
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="投资金额"
          :label-width="formLabelWidth"
          prop="investmentamount"
        >
          <el-input
            v-model="form.investmentamount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="收益分成"
          :label-width="formLabelWidth"
          prop="share"
        >
          <el-input v-model="form.share" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="银行卡号"
          :label-width="formLabelWidth"
          prop="cardnumber"
        >
          <el-input v-model="form.cardnumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="入伙时间"
          :label-width="formLabelWidth"
          prop="entrytime"
        >
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.entrytime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">重置</el-button>
        <el-button type="primary" @click="updateSub" :disabled="isDesabled"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id:'',
      dialogFormVisible:false,
      form: {
        // name: "",
        // wxName: "",
        // phone: "",
        // email: "",
        // investmentamount: "",
        // share: "",
        // cardnumber: "",
        // entrytime: "",
        // password: "123456",
      },
      formLabelWidth: "100px", //新增表单长度
      errorMsg: "",
      isDesabled: false,
    }
  },
  methods:{
    load(){
      this.$axios.get(`http://localhost:8080/jiapei/user/shareholders/${this.id}`).then(res=>{
        this.form=res.data.data.vo;
        console.log(res);
      })

    },
    update(){

      this.dialogFormVisible=true;
    },
    checkPhone() {
      this.$axios
        .get("http://localhost:8080/jiapei/user/checkPhone2", {
          params: {
            phone: this.form.phone,
            id:this.id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 201) {
            this.errorMsg = "电话号码已存在";
            this.isDesabled = true;
          } else {
            this.errorMsg = "";
            this.isDesabled = false;
          }
        });
    },
    updateSub(){
      this.$axios
        .put("http://localhost:8080/jiapei/user/shareholders", this.form)
        .then((res) => {
          this.dialogFormVisible = false;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success",
          });
          this.load();
        });
    }
  },
  created(){
    this.id=this.$route.params.id;
    this.load();
  }

}
</script>

<style type="text/css">
#d1 span {
display:-moz-inline-box;
display:inline-block;
width:400px; 
}
</style>